<template>
  <div class="g-flex g-body g2-login" style="align-items:center;">
    <div class="login-info">
      <!-- <transition appear v-on:before-appear="infoBeforeAppear" v-on:appear="InfoAppear" v-on:after-appear="InfoAfterAppear"> -->
      <div class="login-info--wrapper">
        <div class="login-info--title" ref="info1" style="opacity:0;">OA综合办公系统</div>
        <div>
          <ul class="f-list">
            <li class="list-item" ref="info2" style="opacity:0;line-height:34px;padding:8px 0;">
              <i class="oa-icon-check1"></i>
              围绕着团队的周期项目，通过项目统筹话管理做好计划、流程和项目数据的多维度汇总，推进项目的执行！从而建立多团队、无边界的项目协作方式，提升项目效率。
            </li>
            <li class="list-item" ref="info3" style="opacity:0;line-height:34px;padding:8px 0;">
              <i class="oa-icon-check1"></i>
              公司日常的业务审批、行政管理、考勤等全部实现电子化，流程化，进一步提升公司办公效率。
            </li>
            <li class="list-item" ref="info4" style="opacity:0;line-height:34px;padding:8px 0;">
              <i class="oa-icon-check1"></i>
              争分夺秒的时代，不浪费一分一秒；加强时间观念，建立个人的任务系统。基于时间的团队协作，相互知晓同事的时间占用，避免工作冲突。
            </li>
          </ul>
        </div>
      </div>
      <!-- </transition> -->
    </div>
    <transition
      appear
      v-on:before-appear="customBeforeAppearHook"
      v-on:appear="customAppearHook"
      v-on:after-appear="customAfterAppearHook"
    >
      <div class="login-main">
        <div class="login-main--wrapper">
          <div class="login-main--container">
            <h3 class="login-title">登录OA系统</h3>
            <div class="login-form">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="0"
                class="demo-ruleForm"
                size="large"
              >
                <el-form-item prop="userName" class="login-form--row">
                  <el-input placeholder="请输入用户名" v-model="ruleForm.userName">
                    <template slot="prepend" class="login-form--user">
                      <img src="~@public/image/username.png" alt width="18" height="20">
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="userPassword" class="login-form--row">
                  <el-input type="password" v-model="ruleForm.userPassword" placeholder="请输入密码">
                    <template slot="prepend">
                      <img src="~@public/image/pass.png" alt width="18" height="20">
                    </template>
                  </el-input>
                </el-form-item>

                <el-checkbox v-model="ruleForm.saveInfo">记住密码</el-checkbox>

                <el-form-item>
                  <el-button type="primary" class="login-form--submit" @click="handleClickSubmit">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <footer class="login-main--footer">
          <p>南京易杰智 ©</p>
        </footer>
      </div>
    </transition>
  </div>
</template>
<script>
import * as util from "@/utils/index.js";

const USERNOTEXISTS = "1";
const PASSWORDERROR = "2";

export default {
  name: "login",

  data() {
    var validateUserName = (rule, value, callback) => {
      if (!value || value === "") {
        callback(new Error("请输入用户名"));
      } else if (this.respCode === USERNOTEXISTS) {
        callback(new Error("用户名不存在!"));
      } else if (this.respCode === PASSWORDERROR) {
        callback(new Error("用户名或者密码错误!"));
      } else {
        callback();
      }
    };

    var validatePass = (rule, value, callback) => {
      if (!value || value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      respCode: 0,
      logining: false,
      loginTips: null,
      ruleForm: {
        userName: "admin",
        userPassword: "123456",
        saveInfo: true
      },
      rules: {
        userName: [{ validator: validateUserName }],
        userPassword: [{ validator: validatePass }]
      }
    };
  },
  created() {
    this.getUserInfo();
  },
  mounted() {
    this.infoTransition();
    this.bindKeyEnter();
  },
  methods: {
    /* 
            添加enter点击事件
        */
    bindKeyEnter() {
      document.onkeyup = event => {
        event = event || window.event;
        if (event.keyCode === 13) {
          if (this.logining) return;
          this.logining = true;
          this.handleClickSubmit();
        }
      };
    },
    handleClickSubmit() {
      // 重置 校验
      this.respCode = 0;
      let validateSuccess = () => {
        //清理 缓存
        // store.clear();
        //保存用户信息
        if (this.ruleForm.saveInfo) {
          this.saveUserInfo();
        }
        this.loginTips = this.$loading({
          lock: true,
          text: "登陆中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.postSubmit();
      };
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          validateSuccess();
        } else {
          console.log("error submit!!");
          this.logining = false;
          return false;
        }
      });
    },
    /* 
      发送登录请求
    */
    postSubmit() {
      this.$store
        .dispatch("g2/account/LoginByUser", {
          userName: this.ruleForm.userName,
          userPass: this.ruleForm.userPassword,
          vm: this,
          router: this.$router
        })
        .then(menu => {
          document.onkeyup = null;
          this.loginTips.close();
          this.logining = false;

          // this.$router.addRoutes(menu);
          this.$router.push("/ui/button");
        })
        .catch(e => {
          this.loginTips.close();
          this.logining = false;

          switch (e.respCode) {
            case USERNOTEXISTS:
              this.respCode = USERNOTEXISTS;
              this.$refs["ruleForm"].validateField("userName", valid => {});
              break;

            case PASSWORDERROR:
              this.respCode = PASSWORDERROR;
              this.$refs["ruleForm"].validateField("userName", valid => {});
              break;
            case 12:
              this.respCode = 12;
              this.$message({
                message: "请联系管理员给你配置登录的权限。",
                type: "error"
              });
              break;
            default:
              this.respCode = PASSWORDERROR;
              this.$refs["ruleForm"].validateField("userName", valid => {});
              break;
          }
        });
    },

    filterRouter(filter) {
      const result = [];
      for (var i = 0; i < filter.length; i++) {
        for (var j = 0; j < routerList.length; j++) {
          if (filter[i].key == routerList.key) {
            if (filter[i].children && filter[i].children.length !== 0) {
              routerList[j].children = this.constVal(filter[i], routerList[j]);
            }
            result.push(routerList[j]);
          }
        }
      }
      return result;
    },

    constVal(srcList, targetList) {
      const result = [];
      for (var i = 0; i < filter.length; i++) {
        for (var j = 0; j < routerList.length; j++) {
          if (filter[i].key == routerList.key) {
            result.push(routerList[j]);
          }
        }
      }
      return result;
    },
    /* 
            保存用户信息
        */
    saveUserInfo() {
      // store.set('username', this.ruleForm.userName)
      // store.set('pass', this.ruleForm.userPassword)
    },
    /* 
            获取用户保存的信息
        */
    getUserInfo() {
      // this.ruleForm.userName = store.get('username');
      // this.ruleForm.userPassword = store.get('pass');
    },
    customBeforeAppearHook(el) {
      console.log("customBeforeAppearHook ----------", el);
    },
    customAppearHook(el) {
      console.log("customAppearHook ----------", el);
      Velocity(el, { opacity: 1 }, { duration: 1000 });
    },
    customAfterAppearHook(el) {
      console.log("customAfterAppearHook ----------", el);
    },
    infoTransition() {
      Velocity(
        this.$refs.info1,
        { translateX: [0, -100], opacity: 1 },
        { duration: 1000 }
      );
      Velocity(
        this.$refs.info2,
        { translateX: [0, -100], opacity: 1 },
        { duration: 500, delay: 1000 }
      );
      Velocity(
        this.$refs.info3,
        { translateX: [0, -100], opacity: 1 },
        { duration: 500, delay: 1500 }
      );
      Velocity(
        this.$refs.info4,
        { translateX: [0, -100], opacity: 1 },
        { duration: 1000, delay: 2000 }
      );
    }
  }
};
</script>
<style lang="scss" src="./index.scss"></style>